<template>
    
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <h3>项目基本信息</h3>
        <el-descriptions :column="2" border >
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">工程名称　　</div>
                </template>
                <el-form-item prop="title">
                    <el-input v-model="ruleForm.title" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">结构类型　　</div>
                </template>
                <el-form-item prop="structure_type">
                    <el-input v-model="ruleForm.structure_type" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">工程地址　　</div>
                </template>
                <el-form-item prop="address">
                    <el-input v-model="ruleForm.address" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">建筑面积　　</div>
                </template>
                <el-form-item prop="area">
                    <el-input v-model="ruleForm.area" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">建设单位　　</div>
                </template>
                <el-form-item prop="construct_unit">
                    <el-input v-model="ruleForm.construct_unit" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同开工日期</div>
                </template>
                <el-form-item prop="start_date">
                    <el-date-picker style="width: 100%;" @change="onChangeDate" v-model="ruleForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">设计单位　　</div>
                </template>
                <el-form-item prop="design_unit">
                    <el-input v-model="ruleForm.design_unit" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同完工日期</div>
                </template>
                <el-form-item prop="end_date">
                    <el-date-picker style="width: 100%;" @change="onChangeDate" v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">监理单位　　</div>
                </template>
                <el-form-item prop="supervise_unit">
                    <el-input v-model="ruleForm.supervise_unit" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同工期　　</div>
                </template>
                <el-form-item prop="work_period">
                    <el-text>{{ ruleForm.work_period }}天</el-text>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">施工单位　　</div>
                </template>
                <el-form-item prop="build_unit">
                    <el-input v-model="ruleForm.build_unit" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">总包单位　　</div>
                </template>
                <el-form-item prop="work_period">
                    <el-text>{{ ruleForm.general_units }}天</el-text>
                    <el-input v-model="ruleForm.general_units" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">联合体成员单位</div>
                </template>
                <el-form-item prop="build_unit">
                    <el-input v-model="ruleForm.consortium_units" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">工程造价(万元)</div>
                </template>
                <el-form-item prop="price">
                    <el-input v-model="ruleForm.price" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">结算金额(万元)</div>
                </template>
                <el-form-item prop="settlement">
                    <el-input v-model="ruleForm.settlement" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">项目经理</div>
                </template>
                <el-form-item prop="manager">
                    <el-input v-model="ruleForm.manager" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">工程状态</div>
                </template>
                <el-form-item prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio value="前期配合" >前期配合</el-radio>
                        <el-radio value="中标" >中标</el-radio>
                        <el-radio value="合同已签订" >合同已签订</el-radio>
                        <el-radio value="施工中" >施工中</el-radio>
                        <el-radio value="已完工" >已完工</el-radio>
                        <el-radio value="已竣工验收" >已竣工验收</el-radio>
                        <el-radio value="审计中" >审计中</el-radio>
                        <el-radio value="维保中" >维保中</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">合同概述　　</div>
                </template>
                <el-form-item prop="brief">
                    <el-input v-model="ruleForm.brief" type="textarea" :autosize="{ minRows: 4 }" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">合同付款方式</div>
                </template>
                <el-form-item prop="pay_type">
                    <el-input v-model="ruleForm.pay_type" type="textarea" :autosize="{ minRows: 4 }" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同税率　　</div>
                </template>
                <el-form-item prop="tax_rate">
                    <el-select style="width: 100%" v-model="ruleForm.tax_rate" placeholder="请选择" >
                        <el-option label="请选择" value="" />
                        <el-option label="1%" :value="1" />
                        <el-option label="3%" :value="3" />
                        <el-option label="6%" :value="6" />
                        <el-option label="9%" :value="9" />
                        <el-option label="13%" :value="13" />
                    </el-select>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同税型　　</div>
                </template>
                <el-form-item prop="tax_type">
                    <el-radio-group v-model="ruleForm.tax_type">
                        <el-radio value="‌增值税专用发票‌" >‌增值税专用发票‌</el-radio>
                        <el-radio value="普通发票‌" >普通发票‌</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">中标通知书　</div>
                </template>
                <el-form-item >
                    <el-button type="primary" @click="onUploadFile('notification_of_award')"> 上传 </el-button>
                    <el-button type="primary" @click="onShowFile(ruleForm.notification_of_award)"> 查看 </el-button>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">施工合同　　</div>
                </template>
                <el-form-item >
                    <el-button type="primary" @click="onUploadFile('contract')"> 上传 </el-button>
                    <el-button type="primary" @click="onShowFile(ruleForm.contract)"> 查看 </el-button>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="uploadFile" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>

    <el-dialog v-model="isShowFile" title="文件" width="80%" @close="onCloseFile">
        <component :is="showFile" :data="files"/>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import uploadFile from '@/components/uploadFile.vue'
import showFile from '@/components/showFile.vue'
import http from '../../../util/request';
import { useRouter } from 'vue-router';
import router from '../../../router';
const id:any = ref(useRouter().currentRoute.value.params.id)
const loading = ref<boolean>(false)
const showUpload = ref<boolean>(false)
const uploadData = ref<any>({id:0,file:'',ratio:''})

const files = ref('')
const isShowFile = ref<boolean>(false)

interface RuleForm {
    id:number
    notification_of_award:string
    title: string
    type:number
    brief:string
    area:string
    contract_number:string
    contract:string
    tax_rate:number
    price:number
    settlement:number
    budget:number
    pay_type:string
    work_period:number
    tender_date:string
    start_date:string
    end_date:string
    start_actual_date:string
    end_actual_date:string
    address:string
    status:string
    tax_type:string
    construct_unit:string
    build_unit:string
    design_unit:string
    supervise_unit:string
    consortium_unit:string
    operation_unit:string
    structure_type:string
    manager:string
    general_units:string
    consortium_units:string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    notification_of_award:'',
    title: '',
    type:1,
    brief:'/',
    area:'/',
    contract_number:'',
    contract:'',
    tax_rate:0,
    price:0,
    settlement:0,
    budget:0,
    pay_type:'',
    work_period:0,
    tender_date:'',
    start_date:'',
    end_date:'',
    start_actual_date:'',
    end_actual_date:'',
    address:'/',
    tax_type:'',
    status:'中标',
    construct_unit:'/',
    build_unit:'/',
    design_unit:'/',
    supervise_unit:'/',
    consortium_unit:'/',
    operation_unit:'/',
    structure_type:'/',
    manager:'/',
    general_units:'',
    consortium_units:''
})


const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/project/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
    })
}

const onChangeDate = () => {
    const startDate:any = new Date(ruleForm.value.start_date);
    const endDate:any = new Date(ruleForm.value.end_date);
    const timeDiff = Math.abs(endDate - startDate);
    ruleForm.value.work_period = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
}

const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    brief: [
        { required: true, message: '请输入合同概述', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入项目地址', trigger: 'blur' },
    ],
    start_date: [
        { required: true, message: '请选择合同开工日期', trigger: 'blur' },
    ],
    end_date: [
        { required: true, message: '请选择合同完工日期', trigger: 'blur' },
    ],
    structure_type: [
        { required: true, message: '请输入结构类型', trigger: 'blur' },
    ],
    area: [
        { required: true, message: '请输入建筑面积', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入工程造价', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请选择工程状态', trigger: 'blur' },
    ],
    tax_rate: [
        { required: true, message: '请选择合同税率', trigger: 'blur' },
    ],
    tax_type: [
        { required: true, message: '请选择合同税型', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.value.id)
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/project',ruleForm.value)
            }else{
                request = http.put('/project',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    getData()
})

const onShowFile = (file:string) => {
    files.value = file
    isShowFile.value = true
}

const onCloseFile = () => {
    files.value = ''
}


const onUploadFile = (type:string) => {
    uploadData.value.id = ruleForm.value.id
    uploadData.value.type = type
    if(type == 'contract'){
        uploadData.value.file = ruleForm.value.contract
    }

    if(type == 'notification_of_award'){
        uploadData.value.file = ruleForm.value.notification_of_award
    }
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'contract'){
        ruleForm.value.contract = data
    }

    if(uploadData.value.type == 'notification_of_award'){
        ruleForm.value.notification_of_award = data
    }
    showUpload.value = false
}
</script>
<style scoped>
.el-form{margin:0px auto;width: 1200px;height: calc(100vh - 20vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
.cell-item{font-size: 16px;}
.el-form-item{margin-top: 0px;margin-bottom: 8px;}
::v-deep .el-tabs__item{font-size: 18px !important;}
</style>
